<template><div><h2 id="js基础知识" tabindex="-1"><a class="header-anchor" href="#js基础知识"><span>JS基础知识</span></a></h2>
<h3 id="blob" tabindex="-1"><a class="header-anchor" href="#blob"><span>BLOB</span></a></h3>
<blockquote>
<p><a href="https://blog.csdn.net/Zhuangvi/article/details/121063203" target="_blank" rel="noopener noreferrer">Vue 之 利用new Blob() 对后端返回文件流 或 base64字符串下载导出文件时不同文件类型的 type 值整理及函数封装调用示例_vue new blob-CSDN博客</a></p>
<p><a href="https://juejin.cn/post/7480161953955217445" target="_blank" rel="noopener noreferrer">关于<code v-pre>Uint8Array</code> 和 <code v-pre>ArrayBuffer</code>的使用在 JavaScript 中处理二进制数据时，Uint - 掘金</a></p>
</blockquote>
<h2 id="js框架" tabindex="-1"><a class="header-anchor" href="#js框架"><span>JS框架</span></a></h2>
<h3 id="alova" tabindex="-1"><a class="header-anchor" href="#alova"><span>alova</span></a></h3>
<blockquote>
<p><a href="https://segmentfault.com/a/1190000042479442" target="_blank" rel="noopener noreferrer">前端 - vue+alova入门指南 - 个人文章 - SegmentFault 思否</a></p>
</blockquote>
<blockquote>
<p>访问js数组<a href="https://juejin.cn/post/7197300642062204988" target="_blank" rel="noopener noreferrer">JavaScript 中获取数组最后一个元素4种方法及性能当需要从 JavaScript 中的数组中获取最后一个元素时， - 掘金</a></p>
<p>过滤js数组<a href="https://juejin.cn/post/7155833667615457317" target="_blank" rel="noopener noreferrer">JavaScript数组过滤方法持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第21天，点击查看 - 掘金</a></p>
</blockquote>
<h2 id="css" tabindex="-1"><a class="header-anchor" href="#css"><span>CSS</span></a></h2>
<div class="language-css line-numbers-mode" data-highlighter="shiki" data-ext="css" style="background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#E06C75">white-space</span><span style="color:#C678DD">:</span></span>
<span class="line"><span style="color:#E06C75">white-space</span><span style="color:#C678DD">: nowrap; display: </span><span style="color:#E06C75">inline-block</span><span style="color:#C678DD">;</span><span style="color:#ABB2BF"> // </span><span style="color:#C678DD">设置内容不换行</span><span style="color:#ABB2BF">,</span><span style="color:#C678DD">宽度自适应</span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="elementplus" tabindex="-1"><a class="header-anchor" href="#elementplus"><span>ElementPlus</span></a></h3>
<blockquote>
<p><a href="https://blog.csdn.net/Sunshine_Jian/article/details/126134029" target="_blank" rel="noopener noreferrer">el-table 列内容溢出 显示省略号 悬浮显示文字_eltable超出省略-CSDN博客</a></p>
</blockquote>
<h2 id="布局" tabindex="-1"><a class="header-anchor" href="#布局"><span>布局</span></a></h2>
<p><a href="https://blog.csdn.net/qq_29493173/article/details/121139935" target="_blank" rel="noopener noreferrer">CSS——FC（BFC/IFC/FFC/GFC）超详细版+原理案例分析_css ifc-CSDN博客</a></p>
<p>box-sizing：content-box； 对一个块级元素设置width，指的是内容的宽度</p>
<p>box-sizing：border-box；  对一个块级元素设置width，指的是内容宽度+内边距宽度+边框宽度</p>
<p>width:100% 在不使用绝对定位指的是父元素的内容宽度，使用绝对定位指的是内容宽度+内边距宽度+边框宽度，</p>
<p>若使用绝对定位，想要实现width：100%父元素内容宽度；可以同left，right = padding来实现</p>
<blockquote>
<p><a href="https://segmentfault.com/a/1190000009661604" target="_blank" rel="noopener noreferrer">CSS进阶——绝对定位元素的宽高是如何定义的 - 小前端 - SegmentFault 思否</a></p>
</blockquote>
<p>width:inherit； 指的是父元素的内容宽度+内边距宽度+边框宽度</p>
<p>object-fit:</p>
<ol>
<li>fill(默认属性, 默认缩放到指定大小,宽高比例不合适,会强制拉伸修改宽高比例)</li>
<li>contain(默认缩放到指定大小,宽高比例不合适,会有留白)</li>
<li>cover(默认缩放到指定大小,宽高比例不合适,通过裁剪的方式来维持宽高比例)</li>
<li>none(不缩放,使用图片默认大小)</li>
<li>scale-down</li>
</ol>
<h3 id="flex布局常用" tabindex="-1"><a class="header-anchor" href="#flex布局常用"><span>flex布局常用</span></a></h3>
<div class="language-css line-numbers-mode" data-highlighter="shiki" data-ext="css" style="background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#D19A66">.layout</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#ABB2BF">    display: </span><span style="color:#D19A66">flex</span><span style="color:#ABB2BF">; </span><span style="color:#7F848E;font-style:italic">/*使用flex布局*/</span></span>
<span class="line"><span style="color:#ABB2BF">    flex-direction:  </span><span style="color:#D19A66">row</span><span style="color:#ABB2BF"> | </span><span style="color:#D19A66">row-reverse</span><span style="color:#ABB2BF"> | </span><span style="color:#D19A66">column</span><span style="color:#ABB2BF"> | </span><span style="color:#D19A66">column-reverse</span><span style="color:#ABB2BF">; </span><span style="color:#7F848E;font-style:italic">/*主轴排列方式*/</span></span>
<span class="line"><span style="color:#ABB2BF">    justify-content: </span><span style="color:#7F848E;font-style:italic">/*主轴上的对齐方式*/</span></span>
<span class="line"><span style="color:#ABB2BF">    align-items: </span><span style="color:#7F848E;font-style:italic">/*交叉轴的对齐方式*/</span></span>
<span class="line"><span style="color:#ABB2BF">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#D19A66">.item</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#ABB2BF">    flex: </span><span style="color:#D19A66">0</span><span style="color:#D19A66"> 1</span><span style="color:#D19A66"> auto</span><span style="color:#ABB2BF">; </span><span style="color:#7F848E;font-style:italic">/*默认取值, 第一个值表示是否能增长,第二个值表示是否能缩小,第三个值表示初始带下,即先按内容值计算,有剩余也不会增加,空间不够会缩小来适配*/</span></span>
<span class="line"><span style="color:#ABB2BF">    flex: </span><span style="color:#D19A66">1</span><span style="color:#ABB2BF">; </span><span style="color:#7F848E;font-style:italic">/*占用剩余所有空间,等同于 1 1 0 */</span></span>
<span class="line"><span style="color:#ABB2BF">    flex: </span><span style="color:#D19A66">none</span><span style="color:#ABB2BF">; </span><span style="color:#7F848E;font-style:italic">/*该是多少就占多少,不会增加也不会减小等同于 0 0 auto */</span></span>
<span class="line"><span style="color:#ABB2BF">}</span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="交互反馈" tabindex="-1"><a class="header-anchor" href="#交互反馈"><span>交互反馈</span></a></h2>
<ol>
<li>Modal框（需要用户手动确认，对话框）</li>
<li>Loading框</li>
<li>Toast框（不需要用户确认，改为到时间自动取消）</li>
</ol>
<h2 id="命名规范" tabindex="-1"><a class="header-anchor" href="#命名规范"><span>命名规范</span></a></h2>
<ol>
<li>
<p>项目名 kebab-case（短横线命名法），全部小写 示例 uni-app</p>
</li>
<li>
<p>目录名 同项目名 使用kebab-case（短横线命名法），全部小写 如果是模块名 使用动+宾</p>
</li>
<li>
<p>页面名 大驼峰命名法，且以Page结束 如HomePage.vue</p>
</li>
<li>
<p>组件名（SFC） 大驼峰命名法</p>
<div class="language-shell line-numbers-mode has-collapsed-lines collapsed" data-highlighter="shiki" data-ext="shell" style="--vp-collapsed-lines:15;background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#61AFEF">//</span><span style="color:#98C379"> 官方针对基础组件名的规范</span></span>
<span class="line"><span style="color:#61AFEF">components/</span></span>
<span class="line"><span style="color:#61AFEF">├</span><span style="color:#98C379"> BaseButton.vue</span></span>
<span class="line"><span style="color:#61AFEF">├</span><span style="color:#98C379"> BaseTable.vue</span></span>
<span class="line"><span style="color:#61AFEF">├</span><span style="color:#98C379"> BaseIcon.vue</span></span>
<span class="line"></span>
<span class="line"><span style="color:#61AFEF">//</span><span style="color:#98C379"> 官方针对单例组件名的规范</span></span>
<span class="line"><span style="color:#61AFEF">components/</span></span>
<span class="line"><span style="color:#61AFEF">├</span><span style="color:#98C379"> TheHeading.vue</span></span>
<span class="line"><span style="color:#61AFEF">├</span><span style="color:#98C379"> TheSidebar.vue</span></span>
<span class="line"></span>
<span class="line"><span style="color:#61AFEF">//</span><span style="color:#98C379"> 官方针对紧密耦合组件名的规范</span></span>
<span class="line"><span style="color:#61AFEF">components/</span></span>
<span class="line"><span style="color:#61AFEF">├</span><span style="color:#98C379"> TodoList.vue</span></span>
<span class="line"><span style="color:#61AFEF">├</span><span style="color:#98C379"> TodoListItem.vue</span></span>
<span class="line"><span style="color:#61AFEF">├</span><span style="color:#98C379"> TodoListItemButton.vue</span></span>
<span class="line"></span>
<span class="line"><span style="color:#61AFEF">//</span><span style="color:#98C379"> 我们建议的组件命名规范</span></span>
<span class="line"><span style="color:#61AFEF">components/</span></span>
<span class="line"><span style="color:#61AFEF">├</span><span style="color:#98C379"> base</span><span style="color:#ABB2BF">(</span><span style="color:#61AFEF">或者shared</span><span style="color:#ABB2BF">)</span><span style="color:#98C379">/</span><span style="color:#ABB2BF">   (基础组件使用文件夹管理)</span></span>
<span class="line"><span style="color:#61AFEF">├─</span><span style="color:#98C379"> Button.vue</span></span>
<span class="line"><span style="color:#61AFEF">├─</span><span style="color:#98C379"> Table.vue</span></span>
<span class="line"><span style="color:#61AFEF">├─</span><span style="color:#98C379"> Icon.vue</span></span>
<span class="line"><span style="color:#61AFEF">├</span><span style="color:#98C379"> layout/</span><span style="color:#98C379">           （单例组件或功能性交互组件，文件夹名称需表意，不再使用「The」作为前缀）</span></span>
<span class="line"><span style="color:#61AFEF">├─</span><span style="color:#98C379"> AppHeading.vue</span></span>
<span class="line"><span style="color:#61AFEF">├─</span><span style="color:#98C379"> AppSider.vue</span></span>
<span class="line"><span style="color:#61AFEF">├</span><span style="color:#98C379"> todo-list/</span><span style="color:#98C379">        （遵循目录命名规范，使用kebab-case进行文件夹命名）</span></span>
<span class="line"><span style="color:#61AFEF">├─</span><span style="color:#98C379"> index.js</span><span style="color:#98C379">         （有必要时提供入口文件统一引入，若无必要则省略）</span></span>
<span class="line"><span style="color:#61AFEF">├─</span><span style="color:#98C379"> TodoList.vue</span><span style="color:#98C379">     （组件命名保留父组件名字）</span></span>
<span class="line"><span style="color:#61AFEF">├─</span><span style="color:#98C379"> TodoListItem.vue</span></span>
<span class="line"><span style="color:#61AFEF">├─</span><span style="color:#98C379"> TodoListItemButtom.vue</span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div><div class="collapsed-lines"></div></div></li>
<li>
<p>样式类名 BEM命名法 使用类名前缀与组件名称相关联，以避免命名冲突，如 user-profile__avatar。对于状态类，使用描述性命名，如 is-active、is-disabled。</p>
</li>
<li>
<p>变量命名 小驼峰命名. 必须有意义</p>
<div class="language-shell line-numbers-mode" data-highlighter="shiki" data-ext="shell" style="background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#61AFEF">页面列表：List为后缀，如goodsList</span><span style="color:#ABB2BF"> </span></span>
<span class="line"><span style="color:#61AFEF">页面详情：Details为后缀，如goodsDetails</span><span style="color:#ABB2BF"> </span></span>
<span class="line"><span style="color:#61AFEF">页面状态值:</span><span style="color:#98C379"> 必须是bool类型,</span><span style="color:#98C379"> is作为前缀.</span><span style="color:#98C379"> 如:</span><span style="color:#98C379"> isShow</span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li>
<li>
<p>方法函数命名 小驼峰命名，必须有意义</p>
<div class="language-shell line-numbers-mode" data-highlighter="shiki" data-ext="shell" style="background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#61AFEF">跳转页面:</span><span style="color:#98C379"> to+目录名/页面名</span><span style="color:#98C379"> toGoodsDetail</span><span style="color:#ABB2BF">()</span><span style="color:#98C379">,</span><span style="color:#98C379"> toMy</span><span style="color:#ABB2BF">()</span></span>
<span class="line"><span style="color:#61AFEF">获取方法:</span><span style="color:#98C379"> get+变量名</span><span style="color:#98C379"> getGoodsList</span><span style="color:#ABB2BF">()</span></span>
<span class="line"><span style="color:#61AFEF">更新方法:</span><span style="color:#98C379"> up+变量名</span><span style="color:#98C379"> upIsShow</span><span style="color:#ABB2BF">()</span></span>
<span class="line"><span style="color:#61AFEF">提交方法:</span><span style="color:#98C379"> submit前缀</span><span style="color:#98C379"> submitOrderData</span><span style="color:#ABB2BF">	(防快速点击: </span><span style="color:#98C379">提交数据需要做防止快速重复点击,</span><span style="color:#98C379"> 以3秒为例.</span><span style="color:#98C379"> 防止重复向服务器发送数据</span><span style="color:#ABB2BF">)</span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li>
<li>
<p>js文件名 小驼峰命名法 或者  kebab-case（短横线命名法）</p>
</li>
<li>
<p>其他文件（如CSS、LESS等）：除.vue文件外，其他文件统一使用kebab-case（短横线命名法）示例 my-component.less</p>
</li>
</ol>
<p>常规开发目录示例</p>
<div class="language-shell line-numbers-mode has-collapsed-lines collapsed" data-highlighter="shiki" data-ext="shell" style="--vp-collapsed-lines:15;background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#61AFEF">├──</span><span style="color:#98C379"> api</span><span style="color:#98C379">             //</span><span style="color:#98C379"> 统一接口目录</span></span>
<span class="line"><span style="color:#61AFEF">│</span><span style="color:#98C379">   └──</span><span style="color:#98C379"> api-user.js</span><span style="color:#98C379">     //</span><span style="color:#98C379"> 用户接口</span><span style="color:#ABB2BF"> (按功能分组)</span></span>
<span class="line"><span style="color:#61AFEF">├──</span><span style="color:#98C379"> common</span><span style="color:#98C379">          //</span><span style="color:#98C379"> 公共目录</span></span>
<span class="line"><span style="color:#61AFEF">│</span><span style="color:#98C379">   ├──</span><span style="color:#98C379"> common.js</span><span style="color:#98C379">   //</span><span style="color:#98C379"> 公共函数</span><span style="color:#ABB2BF"> </span></span>
<span class="line"><span style="color:#61AFEF">├──</span><span style="color:#98C379"> components</span><span style="color:#98C379">      //</span><span style="color:#98C379"> 公共组件目录</span></span>
<span class="line"><span style="color:#61AFEF">├──</span><span style="color:#98C379"> pages</span><span style="color:#98C379">           //</span><span style="color:#98C379"> 页面</span></span>
<span class="line"><span style="color:#61AFEF">│</span><span style="color:#98C379">   ├──</span><span style="color:#98C379"> index</span></span>
<span class="line"><span style="color:#61AFEF">│</span><span style="color:#98C379">   │</span><span style="color:#98C379">   └──</span><span style="color:#98C379"> index.vue</span></span>
<span class="line"><span style="color:#61AFEF">│</span><span style="color:#98C379">   ├──</span><span style="color:#98C379"> login</span><span style="color:#ABB2BF">      </span></span>
<span class="line"><span style="color:#61AFEF">│</span><span style="color:#98C379">   │</span><span style="color:#98C379">   ├──</span><span style="color:#98C379"> login.vue</span><span style="color:#ABB2BF">   </span></span>
<span class="line"><span style="color:#61AFEF">│</span><span style="color:#98C379">   │</span><span style="color:#98C379">   └──</span><span style="color:#98C379"> register</span><span style="color:#ABB2BF">    </span></span>
<span class="line"><span style="color:#61AFEF">├──</span><span style="color:#98C379"> static</span><span style="color:#98C379">          //</span><span style="color:#98C379"> 静态资源</span><span style="color:#ABB2BF"> (css/js/图片/声音等等)</span></span>
<span class="line"><span style="color:#61AFEF">│</span><span style="color:#98C379">   ├──</span><span style="color:#98C379"> images</span></span>
<span class="line"><span style="color:#61AFEF">│</span><span style="color:#98C379">   │</span><span style="color:#98C379">   ├──</span><span style="color:#98C379"> category.png</span></span>
<span class="line"><span style="color:#61AFEF">├──</span><span style="color:#98C379"> store</span><span style="color:#98C379">           //</span><span style="color:#98C379"> vuex缓存</span></span>
<span class="line"><span style="color:#61AFEF">│</span><span style="color:#98C379">   └──</span><span style="color:#98C379"> index.js</span></span>
<span class="line"><span style="color:#61AFEF">└──</span><span style="color:#98C379"> utils</span><span style="color:#98C379">           //</span><span style="color:#98C379"> 工具目录</span></span>
<span class="line"><span style="color:#61AFEF">    └──</span><span style="color:#98C379"> request.js</span><span style="color:#98C379">  //</span><span style="color:#98C379"> http请求库</span></span>
<span class="line"><span style="color:#61AFEF">├──</span><span style="color:#98C379"> App.vue</span><span style="color:#ABB2BF">         </span></span>
<span class="line"><span style="color:#61AFEF">├──</span><span style="color:#98C379"> main.js</span><span style="color:#98C379">         //</span><span style="color:#98C379"> 入口文件</span></span>
<span class="line"><span style="color:#61AFEF">├──</span><span style="color:#98C379"> manifest.json</span><span style="color:#98C379">   //</span><span style="color:#98C379"> uniapp配置文件</span></span>
<span class="line"><span style="color:#61AFEF">├──</span><span style="color:#98C379"> pages.json</span><span style="color:#98C379">      //</span><span style="color:#98C379"> 页面配置</span></span>
<span class="line"><span style="color:#61AFEF">├──</span><span style="color:#98C379"> uni.scss</span><span style="color:#98C379">        //</span><span style="color:#98C379"> 公共样式</span></span>
<span class="line"><span style="color:#61AFEF">├──</span><span style="color:#98C379"> README.md</span><span style="color:#98C379">       //</span><span style="color:#98C379"> 自述文件</span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div><div class="collapsed-lines"></div></div><h2 id="网页适配" tabindex="-1"><a class="header-anchor" href="#网页适配"><span>网页适配</span></a></h2>
<p>个人总结的终极方案：rem+响应式布局+媒体查询</p>
<ol>
<li>确定设计稿的宽度,字体大小</li>
<li>根据设计稿宽度,客户端宽度动态计算根节点字体大小，单位使用rem（这部分可以使用vw,vh替换也可以）</li>
<li>可以使用响应式布局（最大的痛点就是浏览器缩放到一定程度，会造成布局混乱），但是必须确定宽度范围，超出宽度的范围使用媒体查询固定页面大小，此时浏览器缩放会转化放大镜缩放效果</li>
<li>所有的图片，视频之类的行块级元素，建议定宽，在高度上进行拉伸</li>
</ol>
<p><strong>adapt.css</strong></p>
<div class="language-css line-numbers-mode has-collapsed-lines collapsed" data-highlighter="shiki" data-ext="css" style="--vp-collapsed-lines:15;background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#7F848E;font-style:italic"> /* 声明全局变量 */</span></span>
<span class="line"><span style="color:#56B6C2"> :root</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">     /* 最小宽度 */</span></span>
<span class="line"><span style="color:#E06C75">     --minWidth</span><span style="color:#ABB2BF">: </span><span style="color:#D19A66">1280</span><span style="color:#E06C75">px</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">     /* 最大宽度 */</span></span>
<span class="line"><span style="color:#E06C75">     --maxWidth</span><span style="color:#ABB2BF">: </span><span style="color:#D19A66">1920</span><span style="color:#E06C75">px</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">     /* 设计稿宽度,不要写px */</span></span>
<span class="line"><span style="color:#E06C75">     --designWidth</span><span style="color:#ABB2BF">: </span><span style="color:#D19A66">1920</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">     /* 设计稿字体大小,不要写px */</span></span>
<span class="line"><span style="color:#E06C75">     --designFontSize</span><span style="color:#ABB2BF">: </span><span style="color:#D19A66">16</span><span style="color:#ABB2BF">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF"> }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#7F848E;font-style:italic"> /* 最小宽度 */</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic"> /* 没使用SCSS，无法在媒体查询中使用变量，请手动更换最大值和最小值 */</span></span>
<span class="line"><span style="color:#C678DD"> @media</span><span style="color:#ABB2BF"> (max-width: </span><span style="color:#D19A66">1280</span><span style="color:#E06C75">px</span><span style="color:#ABB2BF">) {</span></span>
<span class="line"><span style="color:#E06C75">     body</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">         /* 固定页面最小宽度 */</span></span>
<span class="line"><span style="color:#ABB2BF">         width: </span><span style="color:#56B6C2">var</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">--minWidth</span><span style="color:#ABB2BF">);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">     }</span></span>
<span class="line"><span style="color:#ABB2BF"> }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#7F848E;font-style:italic"> /* 最大宽度 */</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic"> /* 没使用SCSS，无法在媒体查询中使用变量，请手动更换最大值和最小值 */</span></span>
<span class="line"><span style="color:#C678DD"> @media</span><span style="color:#ABB2BF"> (min-width: </span><span style="color:#D19A66">1920</span><span style="color:#E06C75">px</span><span style="color:#ABB2BF">) {</span></span>
<span class="line"><span style="color:#E06C75">     body</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">         /* 固定页面最大宽度 */</span></span>
<span class="line"><span style="color:#ABB2BF">         width: </span><span style="color:#56B6C2">var</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">--maxWidth</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">         /* 页面居中 */</span></span>
<span class="line"><span style="color:#ABB2BF">         margin: </span><span style="color:#D19A66">0</span><span style="color:#D19A66"> auto</span><span style="color:#ABB2BF">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">     }</span></span>
<span class="line"><span style="color:#ABB2BF"> }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E06C75"> body</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">     /* 动态计算根节点字体大小 */</span></span>
<span class="line"><span style="color:#ABB2BF">     font-size: </span><span style="color:#56B6C2">calc</span><span style="color:#ABB2BF">(</span><span style="color:#D19A66">100</span><span style="color:#E06C75">vw</span><span style="color:#56B6C2"> /</span><span style="color:#56B6C2"> var</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">--designWidth</span><span style="color:#ABB2BF">) </span><span style="color:#56B6C2">*</span><span style="color:#56B6C2"> var</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">--designFontSize</span><span style="color:#ABB2BF">));</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF"> }</span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div><div class="collapsed-lines"></div></div><p>请在index.html中引入此CSS</p>
<p><a href="https://blog.csdn.net/weixin_52682014/article/details/127625270" target="_blank" rel="noopener noreferrer">如何让网页的内容不随着网页的放大与缩小使网页布局发生错乱_如何让页面窗口不随着窗口改变样式-CSDN博客</a></p>
<p><a href="https://juejin.cn/post/6966103143402700837" target="_blank" rel="noopener noreferrer">基于等比缩放的大屏自适应方案前端的数据可视化越来越重要，炫酷大屏的需求越来越多，您是否经常为屏幕不能自适应而烦恼？如何能 - 掘金</a></p>
<p><a href="https://blog.csdn.net/qq_38210427/article/details/130345981" target="_blank" rel="noopener noreferrer">前端大屏适配方案：rem,vw与缩放(scale)的实践-CSDN博客</a></p>
<h2 id="uni-app中动态计算可视窗口" tabindex="-1"><a class="header-anchor" href="#uni-app中动态计算可视窗口"><span>uni-app中动态计算可视窗口</span></a></h2>
<div class="language-vue line-numbers-mode" data-highlighter="shiki" data-ext="vue" style="background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">template</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">	&#x3C;</span><span style="color:#E06C75">view</span><span style="color:#D19A66"> class</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"content"</span><span style="color:#ABB2BF"> :</span><span style="color:#D19A66">style</span><span style="color:#ABB2BF">=</span><span style="color:#ABB2BF">"</span><span style="color:#ABB2BF">{ </span><span style="color:#E06C75">height</span><span style="color:#ABB2BF">: </span><span style="color:#E06C75">viewHeight</span><span style="color:#56B6C2"> +</span><span style="color:#98C379"> 'px'</span><span style="color:#ABB2BF"> }</span><span style="color:#ABB2BF">"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">        </span></span>
<span class="line"><span style="color:#ABB2BF">	&#x3C;/</span><span style="color:#E06C75">view</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">template</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">script</span><span style="color:#D19A66"> setup</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#C678DD">    import</span><span style="color:#ABB2BF"> { </span><span style="color:#E06C75">ref</span><span style="color:#ABB2BF">,</span><span style="color:#E06C75">onMounte</span><span style="color:#ABB2BF"> } </span><span style="color:#C678DD">from</span><span style="color:#98C379"> 'vue'</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">	const</span><span style="color:#E5C07B"> viewHeight</span><span style="color:#56B6C2"> =</span><span style="color:#61AFEF"> ref</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">''</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#61AFEF">	onMounted</span><span style="color:#ABB2BF">(() </span><span style="color:#C678DD">=></span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#C678DD">		const</span><span style="color:#E5C07B"> systemInfo</span><span style="color:#56B6C2"> =</span><span style="color:#E5C07B"> uni</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">getSystemInfoSync</span><span style="color:#ABB2BF">(); </span><span style="color:#7F848E;font-style:italic">// 获取系统信息</span></span>
<span class="line"><span style="color:#E5C07B">		viewHeight</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">value</span><span style="color:#56B6C2"> =</span><span style="color:#E5C07B"> systemInfo</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">windowHeight</span><span style="color:#ABB2BF">; </span><span style="color:#7F848E;font-style:italic">// 动态计算可视化高度</span></span>
<span class="line"><span style="color:#ABB2BF">	});</span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api封装" tabindex="-1"><a class="header-anchor" href="#api封装"><span>api封装</span></a></h2>
<div class="language-javascript line-numbers-mode has-collapsed-lines collapsed" data-highlighter="shiki" data-ext="javascript" style="--vp-collapsed-lines:15;background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#C678DD">const</span><span style="color:#E5C07B"> BASE_URL</span><span style="color:#56B6C2"> =</span><span style="color:#98C379"> "YOU_BACKEND_URL"</span><span style="color:#ABB2BF">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C678DD">const</span><span style="color:#61AFEF"> request</span><span style="color:#56B6C2"> =</span><span style="color:#ABB2BF"> (</span><span style="color:#E06C75;font-style:italic">params</span><span style="color:#ABB2BF">) </span><span style="color:#C678DD">=></span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#ABB2BF">	</span></span>
<span class="line"><span style="color:#C678DD">	let</span><span style="color:#E06C75"> url</span><span style="color:#56B6C2"> =</span><span style="color:#E5C07B"> params</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">url</span><span style="color:#ABB2BF">; </span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">	// 如果未传值，默认为GET方法</span></span>
<span class="line"><span style="color:#C678DD">	let</span><span style="color:#E06C75"> method</span><span style="color:#56B6C2"> =</span><span style="color:#E5C07B"> params</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">method</span><span style="color:#56B6C2"> ||</span><span style="color:#98C379"> "GET"</span><span style="color:#ABB2BF">; </span></span>
<span class="line"><span style="color:#ABB2BF">	</span></span>
<span class="line"><span style="color:#C678DD">	let</span><span style="color:#E06C75"> data</span><span style="color:#56B6C2"> =</span><span style="color:#E5C07B"> params</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">data</span><span style="color:#56B6C2"> ||</span><span style="color:#ABB2BF"> {}; </span><span style="color:#7F848E;font-style:italic">//默认为空</span></span>
<span class="line"><span style="color:#ABB2BF">	</span></span>
<span class="line"><span style="color:#C678DD">	let</span><span style="color:#E06C75"> header</span><span style="color:#56B6C2"> =</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#98C379">		'Content-Type'</span><span style="color:#ABB2BF">: </span><span style="color:#98C379">'application/json'</span></span>
<span class="line"><span style="color:#ABB2BF">	};</span></span>
<span class="line"><span style="color:#ABB2BF">	</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">	// 如果有token的话动态获取</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">	// if (uni.getStorageSync("token")) header['satoken'] = uni.getStorageSync("token");</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C678DD">	return</span><span style="color:#C678DD"> new</span><span style="color:#E5C07B"> Promise</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">resolve</span><span style="color:#C678DD"> =></span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">		// 切换加载框</span></span>
<span class="line"><span style="color:#E5C07B">		uni</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">showLoading</span><span style="color:#ABB2BF">({</span></span>
<span class="line"><span style="color:#E06C75">			title</span><span style="color:#ABB2BF">: </span><span style="color:#98C379">'加载中'</span></span>
<span class="line"><span style="color:#ABB2BF">		});</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">		// 发起请求</span></span>
<span class="line"><span style="color:#E5C07B">		uni</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">request</span><span style="color:#ABB2BF">({</span></span>
<span class="line"><span style="color:#E06C75">			url</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">BASE_URL</span><span style="color:#56B6C2"> +</span><span style="color:#E06C75"> url</span><span style="color:#ABB2BF">,</span></span>
<span class="line"><span style="color:#E06C75">			method</span><span style="color:#ABB2BF">: </span><span style="color:#E06C75">method</span><span style="color:#ABB2BF">,</span></span>
<span class="line"><span style="color:#E06C75">			header</span><span style="color:#ABB2BF">: </span><span style="color:#E06C75">header</span><span style="color:#ABB2BF">,</span></span>
<span class="line"><span style="color:#E06C75">			data</span><span style="color:#ABB2BF">: </span><span style="color:#E06C75">data</span><span style="color:#ABB2BF">,</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			// 最大响应时间 单位ms</span></span>
<span class="line"><span style="color:#E06C75">			timeout</span><span style="color:#ABB2BF">: </span><span style="color:#D19A66">5000</span><span style="color:#ABB2BF">,</span></span>
<span class="line"><span style="color:#61AFEF">			success</span><span style="color:#ABB2BF">: </span><span style="color:#E06C75;font-style:italic">resp</span><span style="color:#C678DD"> =></span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#C678DD">				let</span><span style="color:#E06C75"> code</span><span style="color:#56B6C2"> =</span><span style="color:#E5C07B"> resp</span><span style="color:#ABB2BF">.</span><span style="color:#E5C07B">data</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">code</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">				let</span><span style="color:#E06C75"> message</span><span style="color:#56B6C2"> =</span><span style="color:#E5C07B"> resp</span><span style="color:#ABB2BF">.</span><span style="color:#E5C07B">data</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">message</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">				// 根据状态码进行对应的回显</span></span>
<span class="line"><span style="color:#C678DD">				switch</span><span style="color:#ABB2BF"> (</span><span style="color:#E06C75">code</span><span style="color:#ABB2BF">) {</span></span>
<span class="line"><span style="color:#C678DD">					case</span><span style="color:#D19A66"> 0</span><span style="color:#ABB2BF">:</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">						// 成功回显</span></span>
<span class="line"><span style="color:#E5C07B">						uni</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">showToast</span><span style="color:#ABB2BF">({</span></span>
<span class="line"><span style="color:#E06C75">							title</span><span style="color:#ABB2BF">: </span><span style="color:#E06C75">message</span><span style="color:#ABB2BF">,</span></span>
<span class="line"><span style="color:#E06C75">							duration</span><span style="color:#ABB2BF">: </span><span style="color:#D19A66">500</span></span>
<span class="line"><span style="color:#ABB2BF">						});</span></span>
<span class="line"><span style="color:#61AFEF">						resolve</span><span style="color:#ABB2BF">(</span><span style="color:#E5C07B">resp</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">data</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#C678DD">						break</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">					case</span><span style="color:#D19A66"> 1</span><span style="color:#ABB2BF">:</span></span>
<span class="line"><span style="color:#E5C07B">						uni</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">showModal</span><span style="color:#ABB2BF">({</span></span>
<span class="line"><span style="color:#E06C75">							title</span><span style="color:#ABB2BF">: </span><span style="color:#98C379">'客户端错误'</span><span style="color:#ABB2BF">,</span></span>
<span class="line"><span style="color:#E06C75">							content</span><span style="color:#ABB2BF">: </span><span style="color:#E06C75">message</span><span style="color:#ABB2BF">,</span></span>
<span class="line"><span style="color:#E06C75">							showCancel</span><span style="color:#ABB2BF">: </span><span style="color:#D19A66">false</span></span>
<span class="line"><span style="color:#ABB2BF">						});</span></span>
<span class="line"><span style="color:#C678DD">						break</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">					case</span><span style="color:#D19A66"> 2</span><span style="color:#ABB2BF">:</span></span>
<span class="line"><span style="color:#E5C07B">						uni</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">showModal</span><span style="color:#ABB2BF">({</span></span>
<span class="line"><span style="color:#E06C75">							title</span><span style="color:#ABB2BF">: </span><span style="color:#98C379">"服务端错误"</span><span style="color:#ABB2BF">,</span></span>
<span class="line"><span style="color:#E06C75">							content</span><span style="color:#ABB2BF">: </span><span style="color:#E06C75">message</span><span style="color:#ABB2BF">,</span></span>
<span class="line"><span style="color:#E06C75">							showCancel</span><span style="color:#ABB2BF">: </span><span style="color:#D19A66">false</span></span>
<span class="line"><span style="color:#ABB2BF">						});</span></span>
<span class="line"><span style="color:#C678DD">						break</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">					default</span><span style="color:#ABB2BF">:</span></span>
<span class="line"><span style="color:#E5C07B">						uni</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">showModal</span><span style="color:#ABB2BF">({</span></span>
<span class="line"><span style="color:#E06C75">							title</span><span style="color:#ABB2BF">: </span><span style="color:#98C379">"错误"</span><span style="color:#ABB2BF">,</span></span>
<span class="line"><span style="color:#E06C75">							content</span><span style="color:#ABB2BF">: </span><span style="color:#98C379">"遇到未知错误，请联系管理员"</span><span style="color:#ABB2BF">,</span></span>
<span class="line"><span style="color:#E06C75">							showCancel</span><span style="color:#ABB2BF">: </span><span style="color:#D19A66">false</span></span>
<span class="line"><span style="color:#ABB2BF">						});</span></span>
<span class="line"><span style="color:#ABB2BF">				}</span></span>
<span class="line"><span style="color:#ABB2BF">			},</span></span>
<span class="line"><span style="color:#61AFEF">			fail</span><span style="color:#ABB2BF">: </span><span style="color:#E06C75;font-style:italic">err</span><span style="color:#C678DD"> =></span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#E5C07B">				uni</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">showModal</span><span style="color:#ABB2BF">({</span></span>
<span class="line"><span style="color:#E06C75">					title</span><span style="color:#ABB2BF">: </span><span style="color:#98C379">'连接错误'</span><span style="color:#ABB2BF">,</span></span>
<span class="line"><span style="color:#E06C75">					content</span><span style="color:#ABB2BF">: </span><span style="color:#98C379">'连接超时,请稍后刷新重试,若多次重试无果，请联系管理员'</span><span style="color:#ABB2BF">,</span></span>
<span class="line"><span style="color:#E06C75">					showCancel</span><span style="color:#ABB2BF">: </span><span style="color:#D19A66">false</span><span style="color:#ABB2BF">, </span><span style="color:#7F848E;font-style:italic">// 不显示取消按钮</span></span>
<span class="line"><span style="color:#ABB2BF">				});</span></span>
<span class="line"><span style="color:#ABB2BF">			},</span></span>
<span class="line"><span style="color:#61AFEF">			complete</span><span style="color:#ABB2BF">() {</span></span>
<span class="line"><span style="color:#E5C07B">				uni</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">hideLoading</span><span style="color:#ABB2BF">();</span></span>
<span class="line"><span style="color:#ABB2BF">			}</span></span>
<span class="line"><span style="color:#ABB2BF">		});</span></span>
<span class="line"><span style="color:#ABB2BF">	});</span></span>
<span class="line"><span style="color:#ABB2BF">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C678DD">export</span><span style="color:#C678DD"> default</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#E06C75">	BASE_URL</span><span style="color:#ABB2BF">,</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">	//获取手机验证码</span></span>
<span class="line"><span style="color:#61AFEF">	getVerificationCode</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">phoneNumber</span><span style="color:#ABB2BF">) {</span></span>
<span class="line"><span style="color:#C678DD">		return</span><span style="color:#61AFEF"> request</span><span style="color:#ABB2BF">({</span></span>
<span class="line"><span style="color:#E06C75">			url</span><span style="color:#ABB2BF">: </span><span style="color:#98C379">'/api/public/phoneCode?phoneNumber='</span><span style="color:#56B6C2"> +</span><span style="color:#E06C75"> phoneNumber</span><span style="color:#ABB2BF">,</span></span>
<span class="line"><span style="color:#E06C75">			method</span><span style="color:#ABB2BF">: </span><span style="color:#98C379">'POST'</span><span style="color:#ABB2BF">,</span></span>
<span class="line"><span style="color:#ABB2BF">		});</span></span>
<span class="line"><span style="color:#ABB2BF">	}</span></span>
<span class="line"><span style="color:#ABB2BF">}</span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div><div class="collapsed-lines"></div></div><h2 id="常用css属性总结" tabindex="-1"><a class="header-anchor" href="#常用css属性总结"><span>常用CSS属性总结</span></a></h2>
<div class="language-css line-numbers-mode" data-highlighter="shiki" data-ext="css" style="background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#C678DD">color: </span><span style="color:#FFFFFF">#FFFFFF;</span><span style="color:#7F848E;font-style:italic"> /*设置标签内所有文字的字体颜色*/</span></span>
<span class="line"><span style="color:#C678DD">inset: 10px 20px 30px 40px;</span><span style="color:#7F848E;font-style:italic"> /* 等同于 top: 10px; right: 20px; bottom: 30px; left: 40px; */</span></span>
<span class="line"><span style="color:#C678DD">padding: </span></span>
<span class="line"><span style="color:#C678DD">background: url("</span><span style="color:#ABB2BF">@/</span><span style="color:#C678DD">assets</span><span style="color:#ABB2BF">/</span><span style="color:#C678DD">img</span><span style="color:#ABB2BF">/</span><span style="color:#E06C75">index-background</span><span style="color:#C678DD">.svg"</span><span style="color:#ABB2BF">) </span><span style="color:#C678DD">center</span><span style="color:#ABB2BF">/</span><span style="color:#C678DD">cover; </span></span>
<span class="line"><span style="color:#C678DD">color:</span><span style="color:#7F848E;font-style:italic"> /*文字颜色*/</span></span>
<span class="line"><span style="color:#E06C75">font-size</span><span style="color:#C678DD">:</span><span style="color:#7F848E;font-style:italic"> /*字体大小*/</span></span>
<span class="line"><span style="color:#C678DD">gap:</span><span style="color:#7F848E;font-style:italic"> /*在flex或者grid布局设置间距*/</span></span>
<span class="line"><span style="color:#E06C75">white-space</span><span style="color:#C678DD">: nowrap;</span><span style="color:#7F848E;font-style:italic"> /*设置span标签不换行*/</span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="css起名习惯" tabindex="-1"><a class="header-anchor" href="#css起名习惯"><span>CSS起名习惯</span></a></h2>
<p>*-container</p>
<p>*-area</p>
<h3 id="前端常用库" tabindex="-1"><a class="header-anchor" href="#前端常用库"><span>前端常用库</span></a></h3>
<ol>
<li>js-xlsx</li>
</ol>
<blockquote>
<p>js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。</p>
<ul>
<li>官方文档：<a href="https://link.juejin.cn/?target=https%3A%2F%2Fdocs.sheetjs.com%2F" target="_blank" rel="noopener noreferrer">docs.sheetjs.com/</a></li>
<li><a href="https://juejin.cn/post/7003153489920524301" target="_blank" rel="noopener noreferrer">js-xlsxjs-xlsx纯前端导出导出，是一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持 - 掘金</a></li>
</ul>
</blockquote>
</div></template>


